<script setup lang="ts">
import type { CurrencyBalance } from '~/api/services/main.api';
import LastTransaction from '../Comps/LastTransaction.vue';
import { toBnVal } from '../ts/utils';
import Bonus, { type BonusKeyType } from './Bonus.vue';

const props = defineProps<{
  currencyInfo?: CurrencyBalance;
  chain?: string;
  readyData?: Api.GetData<typeof apis.apiFundDepositReadyAll>;
  checkedBonusKey?: BonusKeyType;
}>();

const getCurrencyRef = computed(() => props.currencyInfo?.currency ?? '');
const getChainRef = computed(() => props.chain ?? '');

const getCurrencyInfoRef = computed(() => {
  if (!props.currencyInfo)
    return;

  return {
    ...props.currencyInfo,
    token: props.currencyInfo.tokens?.find(x => x.chain === getChainRef.value),
  };
});

const walletAddressQry = useQuery({
  enabled: () => !!(getCurrencyRef.value && getChainRef.value),
  queryKey: [apis.apiFundDepositGetAddress.id, getCurrencyRef, getChainRef],
  queryFn: () => apis.apiFundDepositGetAddress({ requestBody: { currency: getCurrencyRef.value, chain: getChainRef.value } }),
});

const walletAddressLoading = computed(() => toValue(walletAddressQry.isLoading));

const walletAddress = computed(() => toValue(walletAddressQry.data)?.wallet_address ?? '');

const openWalletAddress = useBoolean();

const getDecimalsRef = computed(() => toBnVal(getCurrencyInfoRef.value?.token?.min_deposit_amount)?.decimalPlaces() ?? 0);
</script>

<template>
  <div class="relative flex-1 text-sm text-sys-text-body lt-mobile:(h-full overflow-y-auto pb-3)">
    <div class="grid grid-cols-1 gap-y-3">
      <slot />
      <div v-if="!toValue(walletAddressQry.isError)" class="grid grid-cols-1 gap-3">
        <Bonus :currency="getCurrencyRef" :decimals="getDecimalsRef" :checkedBonusKey="checkedBonusKey" />
        <div>
          <div class="mb-2">
            {{ $t('mxuQiC5Sz2t99dgmRjuJe', { name: getCurrencyInfoRef?.currency }) }}
          </div>

          <div class="grid grid-cols-[1fr_auto] gap-3">
            <div class="text-sys-text-body">
              {{ $t('dE0Irc3DXrTauBywLJrO', { ...getCurrencyInfoRef?.token, chain: getCurrencyInfoRef?.token?.chain ? `(${getCurrencyInfoRef?.token?.chain})` : '', currency: getCurrencyInfoRef?.currency }) }}
            </div>
            <div class="row-span-2 size-20 rounded-lg bg-white p2 op-90" u:tablet="size-35">
              <AQrcode
                :value="walletAddress"
                :size="400"
                color="#000"
                bgColor="#FFF"
                :status="walletAddressLoading ? 'loading' : 'active'"
                @click="toValue(walletAddressQry.isSuccess) && $bp.ltTablet && openWalletAddress.setTrue()"
              />
            </div>
            <TSkeleton v-if="walletAddressLoading" class="lt-mobile:(col-span-2)">
              <TSkeleton class="hidden lt-mobile:block" type="rect" width="auto" />
              <TSkeleton class="lt-mobile:hidden" type="rect" width="auto" height="66px" />
            </TSkeleton>
            <div v-else class="grid grid-cols-[1fr_auto] min-h-10 gap-2 rounded-lg bg-sys-layer-a px-4 py-3 lt-mobile:(col-span-2)">
              <span class="break-all">{{ walletAddress }}</span>
              <TCopy v-if="walletAddress" :source="walletAddress" :nthParent="1" />
            </div>
          </div>
        </div>

        <div class="grid grid-cols-[auto_1fr] gap-1 rounded-lg bg-sys-layer-a px-4 py-3 leading-normal">
          <i class="i-local:warning mt-0.5 text-base" />
          <span>
            {{ $t('bi4qKzRqUa9PbYlaBa9nz') }}
            {{ getCurrencyInfoRef?.token?.min_deposit_amount ?? 0 }} {{ getCurrencyInfoRef?.token?.currency }}.
          </span>
        </div>
        <div>
          <div class="text-sys-text-body leading-normal">
            {{ readyData?.tips }}
          </div>
          <LastTransaction />
        </div>
      </div>

      <div v-else class="h-60 flex-center text-center text-base text-red-5">
        This token is temporarily not supported.
      </div>
    </div>
  </div>

  <AModal
    v-model:open="openWalletAddress.is"
    title="Deposit Address"
    wrapClassName="ant-cover__Modal-drawer"
    centered
    :footer="null"
  >
    <div class="mx-auto my-10 size-60 rounded-lg bg-white p-3">
      <AQrcode :value="walletAddress" :size="400" color="#000" bgColor="#FFF" />
    </div>
  </AModal>
</template>
